<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>饼图</title>
    <!-- 引入 echarts.js -->
    <script src = "https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
    <div id = "main" style="width:600px;height:400px;"></div>
    <script type="text/javascript">

        var myEcharts = echarts.init(document.getElementById('main'));

        var option = {
            backgroundColor: '#2c343c',

            title: {
                text: 'Customized Pie',
            left: 'center',
            top: 20,
            textStyle: {
                color: '#ccc'
                }
            },

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },

            series: [
                {
                    name: '各类别客户',
                    type: 'pie',
                    radius: '55%',
                    center: ['50%', '50%'],
                    data: [
                        {value: 183472, name: "流失用户"},
                         {value: 6546, name: "回流用户" },
                        {value: 524, name: "连续活跃用户"},
                        {value: 91, name: "新用户"},
                        {value: 0, name: "活跃用户"}
                    ].sort(function (a, b) { return a.value - b.value; }),
            roseType: 'radius',
                    label: {
                        color: 'rgba(255, 255, 255, 0.3)'
                        },
            labelLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                    },
            itemStyle: {
                color: '#c23531',
                shadowBlur: 200,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
            },

            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
                return Math.random() * 200;
            }
        }
    ]
}
        myEcharts.setOption(option);
    </script>
</body>
</html>